<template>
  <div class="trash-sidebar">
    <div class="trash-header">
      废纸篓
    </div>
    <div class="trash-tab">
      <div class="update-time-tab">更新时间</div>
      <div class="title-tab">标题</div>
    </div>
    <ul class="trash-list">
      <li @click="doRouterTrash(note, index)" class="trash-item" :class="{ 'trash-item-active': index === liIndex }" v-for="(note, index) in allTrashNotes" :key="note.id">
        <div class="trash-update-time">{{ _formatDate(note.modifiedTime) }}</div>
        <div class="trash-title">{{ note.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {friendlyDate} from '../common/js/date.js'
  import {mapState} from 'vuex'

  export default {
    name: 'TrashSiderbar',
    created() {
      this.$Loading.start();
      this._getTrashNotes();
      this.$Loading.finish();
    },
    data() {
      return {
        notes: [],
        chooseTrashNote: {},
        liIndex: -1
      }
    },
    computed: {
      ...mapState([
        'allTrashNotes'
      ])
    },
    methods: {
      doRouterTrash(note, index) {
        let noteId = note.id;
        this.liIndex = index;
        this.notes.forEach((note, index) => {
          if (note.id === noteId) {
            this.chooseTrashNote = this.notes[index]
          }
        });
        this.$store.commit('setTrashNote', this.chooseTrashNote);
        this.$router.push(`/trash?noteId=${note.id}`);
      },
      _getTrashNotes() {
        this.postJSON(this.$urlApi.TRASH_NOTES).then(res => {
          this.notes = res.data;
          this.notes.sort();
          this.$store.commit('setAllTrashNotes', this.notes)
        }).catch(err => {
          console.log(err);
        })
      },
      _formatDate(dateStr) {
        return friendlyDate(dateStr);
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import '../common/stylus/variables.styl';
  @import '../common/stylus/styles.styl';
  .trash-sidebar
    width 300px
    max-height 100%
    overflow auto
    background-color $notebook-bg
    margin-left 100px
    border-right 1px solid $line-color
    .trash-header
      text-align center
      padding 15px 0
      border-bottom 1px solid $line-color
      position relative
    .trash-tab
      display flex
      font-size 14px
      border-bottom 1px solid $line-color
      .update-time-tab, .title-tab
        padding 10px
        flex 1
      .update-time-tab
        border-right 1px solid $line-color
    .trash-list
      font-size 13px
      .trash-item
        display flex
        padding 10px
        border-bottom 1px solid $line-color
        cursor pointer
        transition all .3s
        &.trash-item-active
          background-color $theme-color
          color #fff
        &:hover
          background-color $theme-color
          color #fff
        .trash-update-time, .trash-title
          flex 1
        .trash-title
          padding-left 20px
</style>
